<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-select</title>
    <link rel="stylesheet" href="./css/init.css">
    <!-- 字体 -->
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <style>
    .content {
        width: 80%;
        height: 80%;
        margin: 50px auto;
    }
    
    .table td {
        border: 1px solid #ccc;
        width: 50px;
        height: 30px;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <table class="table" id="table">
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 渲染外层 -->
                    <template v-for="datas in tableData">
                        <!--渲染内层  -->
                        <template v-for="(list,index) in datas.lists">
                            <!-- 如果是第一行则跨行 -->
                            <template v-if="index==0">
                                <tr>
                                    <td :rowspan="datas.lists.length" v-text="datas.name"></td>
                                    <!-- 遍历数据 -->
                                    <td v-for="li in list" v-text="li">{{li}}</td>
                                </tr>
                            </template>
                            <template v-else>
                                <tr>
                                    <!-- 遍历数据 -->
                                    <td v-for="li in list" v-text="li">{{li}}</td>
                                </tr>
                            </template>
                        </template>
                    </template>
                    <!--渲染外层结束  -->
                </tbody>
            </table>
        </div>
</body>
<script src="js/vue.js"></script>
<script>
var select = new Vue({
    el: '#table',
    data: {
        tableData: [{
            time: '2018-8-8',
            name: 'st',
            lists: [{
                a: 100,
                b: 100
            }, {
                a: 90,
                b: 90
            }, {
                a: 80,
                b: 80
            }]
        }, {
            time: '2018-8-8',
            name: 'st1',
            lists: [{
                a: 100,
                b: 100
            }, {
                a: 90,
                b: 90
            }, {
                a: 80,
                b: 80
            }]
        }]
    },
    created: function() {

    },
    methods: {

    }
})
</script>

</html>
